<template>
  <div>
    <div style="position:relative;">
      <div :style="{height:n_he+n_top+'px'}">
        <img
          src="https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi9iNWRlZWRlODU4MGVjNTAzYWMwMjhjYTg0Y2EwMjU3Yi05MC53ZWJw.webp"
          style="width:100%;"
        />
      </div>
      <div
        style="width:100%; height:100%;background:rgba(0,0,0,.3);position:absolute; left:0;top:0; padding-top:150px;box-sizing: border-box; "
      >
        <h2 style="font-size:48px;color:#fff; padding-top:38px;text-align:center;">旅游套餐</h2>
        <p
          style="font-size:18px; color:#fff; padding:22px 0px;text-align:center;"
        >CITY TOURS / TOUR TICKETS / TOUR GUIDES</p>
        <div style="background:#efefef; width:100%;" ref="sa">
          <div style=" padding-top:100px; width:80%;
          margin:auto;overflow :hidden;">
            <div
              style="float:left; width:80%; padding :20px;
    box-sizing: border-box; overflow :hidden;"
            >
              <h2 style="padding-bottom:30px;">旅游套餐推荐 / package</h2>
              <div
                style="width:50%; float:left; padding :5px;
    box-sizing: border-box;"
                v-for="i in ass"
              >
                <div
                  style="width:100%; border:1px solid #ccc;box-sizing: border-box; background:#fff;"
                >
                  <img :src="i.img" alt style="width:100%;" />
                  <p style="line-height:30px; text-align:center;">{{i.title}}</p>
                </div>
              </div>
            </div>
            <div style="width:20%; float:right;padding-top:90px;
    box-sizing: border-box;">
              <div style="height:200px; ">
                  <div style="height:200px;" id="allmap"></div>
              </div>
              <div style="padding-top:10px;">
                <div style="text-align:center;">
                  <span
                    style="display: inline-block;width:100%; line-height: 36px;background: #aaa;"
                  >在线预定</span>
                </div>
                <p style="padding:5px; 0px">你的姓名 *</p>
                <input type="text" style="width:100%; height:24px;" />
                <p style="padding:5px; 0px">您的电话 *</p>
                <input type="text" style="width:100%; height:24px;" />
                <p style="padding:5px; 0px">目的地 *</p>
                <select style="width:100%;height:24px;">
                  <option selected="selected">埃菲尔铁塔</option>
                  <option>凡尔赛宫</option>
                  <option>塞纳河</option>
                </select>
                <p style="padding:5px; 0px">成人（12周岁以上）</p>
                <select style="width:100%;height:24px;">
                  <option selected="selected">1</option>
                  <option>2</option>
                  <option>3</option>
                </select>
                <p style="padding:5px; 0px">儿童（12周岁以下）</p>
                <select style="width:100%;height:24px;">
                  <option selected="selected">1</option>
                  <option>2</option>
                  <option>3</option>
                </select>
                <p style="padding:5px; 0px">备注</p>
                <div
                  style="width:100%; height:40px; border:1px solid #ccc; box-sizing: border-box;"
                  contenteditable="true"
                ></div>

                <span
                  style="margin-top: 10px;padding: 0 30px; background: #ccc;display: inline-block;line-height: 32px;"
                >提交</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      n_he: "",
      n_top: "",
      ass: [
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi82ZjAzMzYxODVjMDU3MWU3OGZiMGVlMGVmY2IzODc3ZC00NTB4MzAwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "法国巴黎六日游"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi84MGQ2N2I5Y2Q0MDgxMTZhMTdjOGJhNmE4MWYwMWUxOS00NTB4MzAwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "法国巴黎四日游"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi85YWI1YmIxOWRmNDVmNThmNGE1OWEwYjdiODU5OTE4OS00NTB4MzAwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "法国巴黎三日游"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi9iMDE5ZWMwMmI1OTc5YmFjOTMyYzc4Mjk1Zjc2OWRkOC00NTB4MzAwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "法国巴黎两日游"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi84MGQ2N2I5Y2Q0MDgxMTZhMTdjOGJhNmE4MWYwMWUxOS00NTB4MzAwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "法国巴黎一日游"
        },
        {
          img:
            "https://ccdn.goodq.top/caches/628d236aceaa012698bd7fe4b8dc188c/aHR0cDovLzU4NzQ1YTE5NzJjNmYudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wMi84MGQ2N2I5Y2Q0MDgxMTZhMTdjOGJhNmE4MWYwMWUxOS00NTB4MzAwLTkwLndlYnA_p_p100_p_3D.webp",
          title: "法国巴黎五日游"
        }
      ]
    };
  },
  mounted() {
    // this.$nextTick(() => {
    this.n_he = this.$refs.sa.offsetHeight;
    this.n_top = this.$refs.sa.offsetTop;
    //   console.log(this.n_top+this.n_he)
    // });
  }
};
</script>


<style>
</style>